<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>dropdown menu</title>
  <style>
    a{
      display:inline-block;
      width:200px;
      text-decoration: none;
    }
    ul{
      list-style: none;
      padding:0;
      width:200px;
      margin:0;
      display:none;
      border:1px solid #000;
    }
    #menu>li:hover{
      background:#888;
    }
    a>span{
      display: inline-block;
      border:5px solid transparent;
      height: 0;
      border-top:5px solid #000;
    }
  </style>
</head>
<body>
<div>
  <a href="#" id="dropdown">下拉菜单 <span></span></a>
  <ul id="menu">
    <li><a href="#">唐僧</a></li>
    <li><a href="#">孙悟空</a></li>
    <li><a href="#">猪八戒</a></li>
    <li><a href="#">沙僧</a></li>
  </ul>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
  $("#dropdown").click(function () {
   var display= $(this).next().css("display");
   console.log(display);
    $("#menu").slideToggle();
   if(display=="block"){
     $(this).children("span").css("border-top","5px solid transparent");
     $(this).children("span").css("border-bottom","5px solid black");
   }else if(display=="none"){
     $(this).children("span").css("border-top","5px solid black");
     $(this).children("span").css("border-bottom","5px solid transparent");
   }

  })
</script>
</body>
</html>